<template>
	<view class="login-page">
		
			<u-navbar titleStyle="color: #ffffff;" 
			title="登录"
			leftIconColor="#000000"  :placeholder="true"
				bgColor="rgba(0,0,0,0)" :autoBack="true">
				<view style="color:#000000" slot="center"> 
					登录
				</view>
			</u-navbar>
	     <view class="login-container">
			<u-image :src="getImg('xcx_logo.svg')" width="100" height="100"></u-image>
			<view class="title">{{title}}</view>
			<view class="w-full u-p-l-20 u-p-r-20 btn-box">
			<block v-if="isAgreed">
				<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
					>手机号快捷登录</button>
				</block>
					<block v-else>
						<button class="login-btn" @click="onAgree">手机号快捷登录</button>
					</block>
		 </view>
		 <view class="agreement">
					<u-checkbox-group v-model="agreementChecked">
						<u-checkbox  size="20" activeColor="#0030a7" name="agree" shape="circle"></u-checkbox>
					</u-checkbox-group>
					 <view class="agreement-text">
						我已阅读并同意<text class="link" @click="onAgreement('user')">
							《用户协议》</text>和<text class="link" @click="onAgreement('privacy')">《隐私政策》</text>
					</view>
				</view>
		 </view>
		

	
	</view>
</template>

<script>
	import {
		login
	} from '@/api/index'
	
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import ls from "@/util/ls"
	import {name} from '@/util/config'
	export default {
		data() {
			return {
				title:`欢迎使用${name}`,
				agreementChecked: [],
				login:1,  // 1跳首页 2调回本来的页面
				desc:`本小程序为小区业主参与公共事务管理提供平台，您可通过该小程序对小区公共事务管理方案进行表决，以规范化流程促进达成共识。小程序功能使用需要完成相关认证，认证完成后，您可以依法行使表决权，参与小区公共事务管理，共同营造美好家园。`
			};
		},
		computed: {
			isAgreed() {
				 return this.agreementChecked.includes('agree');
				//return true
			}
		},
		onLoad(options){
			
			this.init(options)
		},
		methods: {
			...mapActions("app",[
				'wxlogin'
			]),
			...mapMutations("app",[
				'setUser'
			]),
			onAgreement(type){
				if(type=='user'){
					uni.navigateTo({
						url: `/pages/useragreement/index`
					})
				}else{
					uni.navigateTo({
						url: `/pages/agreement/index?id=${type}`
					})
				}
			
			},
			init(options){
			  if(options.login){	
					this.login=options.login
				}
			},
           onAgree(){
			uni.showToast({
						title: '请先同意用户协议和隐私政策',
						icon: 'none'
					});
		   },
			onGetPhoneNumber(e) {
			
				if (e.detail.errMsg !== "getPhoneNumber:ok") {
					uni.showToast({
						title: '您已取消授权',
						icon: 'none'
					});
					return;
				}
				e.detail.login=this.login 
                this.wxlogin(e)
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background: #F8FAFD;
	}

	

	.login-page {
		width: 100%;
		height: 100vh;
       background: #f8fafd;
		&-navbar {
			width: 100%;
			height: 800rpx;
			background-size: cover;
			background-repeat: no-repeat;
		}
	}

	.login-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100px;
		.title {
			font-size: 36rpx;
			
			text-align: center;
			color: #333;
			margin-top: 20rpx;
		}
		.login-btn {
			width: 97%;
			margin-top: 40rpx;
			background: $uni-color-primary;
			color: #fff;
			border-radius: 12rpx;
			font-size: 30rpx;
			font-weight: 500;
			height: 88rpx;
			line-height: 88rpx;
			border: none;
			
			&::after {
				border: none;
			}

			&[disabled] {
				background-color: #a0cfff;
				color: #e0e0e0;
			}
		}

	}
	.btn-box{
		margin-top:120rpx;
	}

	.login-box {
		background: linear-gradient( 360deg, #FFFFFF 0%, #E3F0FD 100%);
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx #FFFFFF, 0rpx 5rpx 14rpx 0rpx rgba(169,194,209,0.1), 0rpx -13rpx 8rpx 0rpx rgba(44,92,204,0.03);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		padding: 40rpx;
		

		

		.description {
			margin-top: 40rpx;
			font-size: 28rpx;
			letter-spacing: 2px;
			font-weight: 400;
			color: #666;
			line-height: 40rpx;
			text-align: justify;
		}

		
	
	}
	.agreement {
		width: 100%;
		margin-top: 40rpx;
		margin-left: 60rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;

			.agreement-text {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #333333;

				.link {
					color: $uni-color-primary;
				}
			}
		}
</style>